<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas" width="600" height="250"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        
        // --- Dimensions ---
        const yTop = 50;
        const yBottom = 200;
        const xStart = 20;
        const xEnd = 580;
        const xCenter = 300;
        const yArrow = 115;

        // --- Helper Function to draw an arrow with a filled head ---
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 12; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            
            // Draw line shaft
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Draw filled arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));
            ctx.closePath();
            ctx.fill();
        }

        // 1. Draw the Pipe
        ctx.beginPath();
        ctx.moveTo(xStart, yTop);
        ctx.lineTo(xEnd, yTop);
        ctx.moveTo(xStart, yBottom);
        ctx.lineTo(xEnd, yBottom);
        ctx.stroke();

        // 2. Draw the Metal Wire Mesh (dashed line)
        ctx.beginPath();
        ctx.setLineDash([8, 8]);
        ctx.moveTo(xCenter, yTop);
        ctx.lineTo(xCenter, yBottom);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // --- Draw Left Section ---
        const xLeftCenter = (xStart + xCenter) / 2;
        
        // Draw left arrow
        drawArrow(ctx, xLeftCenter - 60, yArrow, xLeftCenter + 60, yArrow);
        
        // Draw left labels
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.fillText('T₀, p₀', xLeftCenter, yArrow - 35);
        ctx.fillText('v₀', xLeftCenter, yArrow + 45);

        // --- Draw Right Section ---
        const xRightCenter = (xCenter + xEnd) / 2;

        // Draw right arrow
        drawArrow(ctx, xRightCenter - 60, yArrow, xRightCenter + 60, yArrow);

        // Draw right labels
        ctx.fillText('(T₁, p₁)', xRightCenter, yArrow - 35);
        ctx.fillText('v₁', xRightCenter, yArrow + 45);

        // --- Draw Bottom Label for the mesh ---
        ctx.font = '24px "SimSun", "Songti SC", serif'; // Font for Chinese characters
        ctx.textAlign = 'right';
        ctx.fillText('金属', xCenter - 5, yBottom + 30);
        ctx.textAlign = 'left';
        ctx.fillText('丝网', xCenter + 5, yBottom + 30);

    </script>
</body>
</html>